<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-card
        :title="item.title"
        :thumb="item.img_url"
        v-for="item in newsList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <div class="van-card__bottom" slot="tags">
          <div class="van-card__price">发表时间 : {{ item.add_time | dateFormat }}</div>
          <div class="van-card__num">点击 : {{item.click}}</div>
        </div>
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
      isLoading: false
    };
  },
  mounted() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      const { data: res } = await this.$http.get("/api/getnewslist");
      this.newsList = res.message;
    },
    onRefresh() {
      setTimeout(() => {
        this.getNewsList();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    goDetail(id) {
      this.$router.push("/news/detail/" + id);
    }
  }
};
</script>

<style lang="less" scoped>
.van-card {
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 10px;

  .van-card__thumb {
    width: 42px;
    height: 42px;
    margin-right: 10px;
    padding: 0;
  }
  .van-card__content {
    min-height: 0;
  }

  .van-card__title {
    height: 17px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
  }

  .van-card__bottom,
  .van-card__price {
    color: #226aff;
    line-height: 30px;
  }
}
</style>